<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="产品名称" prop="jrProductName">
        <el-input v-model="form.jrProductName" placeholder="请输入产品名称"/>
      </el-form-item>
      <el-form-item label="资金提供方" prop="companyId">
        <el-select v-model="form.companyName" placeholder="请选择资金提供方" @change="selectPlatform($event)" >
          <el-option v-for="item in capitalList"
                     :key="item.id"
                     :label="item.label"
                     :value="item">{{item.companyName}}</el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="金融产品类型" prop="jrProductType">
        <el-select v-model="form.jrProductType" placeholder="请选择金融产品类型">
          <el-option label="租房分期" value="1"></el-option>
          <el-option label="收房贷" value="2"></el-option>
          <el-option label="应收租约保理" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="还款方式" prop="repaymentType">
        <el-select v-model="form.repaymentType" placeholder="请选择还款方式">
          <el-option label="按月还款" value="1"></el-option>
          <el-option label="按季还款" value="2"></el-option>
          <el-option label="按租约周期" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分期期限(-1表示无限期)" prop="instalmentPeriod">
        <el-input v-model="form.instalmentPeriod" placeholder="请输入分期期限(-1表示无限期)"/>
      </el-form-item>
      <el-form-item label="授信额度(单位：%，比如80%，存的是80)" prop="creditLine">
        <el-input v-model="form.creditLine" placeholder="请输入授信额度(单位：%，比如80%，存的是80)"/>
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankCardNumber">
        <el-input v-model="form.bankCardNumber" placeholder="请输入银行卡号"/>
      </el-form-item>
      <el-form-item label="开户银行ID" prop="bankId">
        <el-input v-model="form.bankId" placeholder="请输入开户银行ID"/>
      </el-form-item>
      <el-form-item label="银行名称" prop="bankName">
        <el-input v-model="form.bankName" placeholder="请输入银行名称"/>
      </el-form-item>
      <el-form-item label="开户行(支行)" prop="openingBank">
        <el-input v-model="form.openingBank" placeholder="请输入开户行(支行)"/>
      </el-form-item>
      <el-form-item label="账户名称" prop="accountName">
        <el-input v-model="form.accountName" placeholder="请输入账户名称"/>
      </el-form-item>
      <el-form-item label="联行行号" prop="bankBranchCodeLh">
        <el-input v-model="form.bankBranchCodeLh" placeholder="请输入联行行号"/>
      </el-form-item>
      <el-form-item label="开户行所在省ID" prop="bankAccountProvince">
        <el-input v-model="form.bankAccountProvince" placeholder="请输入开户行所在省ID"/>
      </el-form-item>
      <el-form-item label="申请条件" prop="applicationConditions">
        <el-input v-model="form.applicationConditions" placeholder="请输入申请条件"/>
      </el-form-item>
      <el-form-item label="风控要求" prop="riskRequirement">
        <el-input v-model="form.riskRequirement" placeholder="请输入风控要求"/>
      </el-form-item>
      <el-form-item label="创建用户ID" prop="createUserid">
        <el-input v-model="form.createUserid" placeholder="请输入创建用户ID"/>
      </el-form-item>
      <el-form-item label="更新用户ID" prop="updateUserid">
        <el-input v-model="form.updateUserid" placeholder="请输入更新用户ID"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {listProduct,getProduct, delProduct, addProduct, updateProduct} from "@/api/finance/product";
import {listCapital} from "@/api/finance/capital";

export default {
  name: "Product",
  data() {
    return {
      // 表单参数
      form: {},
      capitalList: [],
      // 表单校验
      rules: {
        jrProductName: [
          {required: true, message: "产品名称不能为空", trigger: "blur"}
        ],
        companyId: [
          {required: true, message: "资金提供方不能为空", trigger: "change"}
        ],
        jrProductType: [
          {
            required: true, message: "金融产品类型,1:租房分期,2:收房贷,3:应收租约保理,不能为空",
            trigger:"change"
          }
        ],
        repaymentType: [
          {
            required: true, message: "还款方式,1:按月还款,2:按季还款3:按租约周期,支付,不能为空",
            trigger:"change"
          }
        ],
        delFlg: [
          {
            required: true, message: "删除标识, 0: 未删除，1：删除不能为空",
            trigger: "blur"
          }
        ],
        createUserid: [
          {required: true, message: "创建用户ID不能为空", trigger: "blur"}
        ],
        createTime:
          [
            {required: true, message: "创建时间不能为空", trigger: "blur"}
          ],
        updateUserid:
          [
            {required: true, message: "更新用户ID不能为空", trigger: "blur"}
          ],
        updateTime:
          [
            {required: true, message: "更新时间不能为空", trigger: "blur"}
          ]
      }
    }
      ;
  }
  ,
  methods: {
    // 取消按钮
    cancel()
    {
      this.open = false;
      this.reset();
    },


    /** 新增按钮操作 */
    /** 提交按钮 */
    submitForm()
    {
      this.$refs["form"].validate(valid => {
        if (valid) {

          addProduct(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
          this.$router.push("/finance/product/index")

        }
      });
    },
    getCapitalList: function () {
      listCapital().then(response => {
        // console.log(response.rows);
        this.capitalList = response.rows;
        console.log(this.capitalList);

      });
    },
    selectPlatform(event){
      this.form.companyId=event.id
      this.form.companyName=event.companyName
      console.log(event.id)
    }

  },
  created()
  {
    this.getCapitalList();
  },
};
</script>
